<template>
  <div v-if="goodsDetail">
    <!-- 导航栏 -->
    <!-- <van-nav-bar
      :title="goodsDetail?.proname"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <van-nav-bar
      :title="goodsDetail.proname"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 轮播图渲染 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(item, index) in goodsDetail.banners[0].split(',')"
        :key="index"
      >
        <img style="width: 100%" :src="item" />
      </van-swipe-item>
    </van-swipe>
    <!-- 详情信息 -->
    <div class="info">
      <p>
        <van-tag size="large" type="danger" style="margin-right: 5px"
          >自营</van-tag
        >
        {{ goodsDetail.proname }}
      </p>
      <p class="price">￥{{ goodsDetail.originprice | formatPrice }}</p>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <!-- $router的replace，会把当前页面 GoodsDetail，从浏览器的历史记录中移除掉 -->
      <van-goods-action-icon
        icon="cart-o"
        @click="$router.replace('/cart')"
        text="购物车"
        :badge="getTotalCount"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" @click="add" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getGoodsDetail } from '@/api/goods'
// import { mapGetters, mapMutations } from 'vuex'
import { mapMutations } from 'vuex'
import badgeMixins from '@/mixins'
export default {
  name: 'GoodsDetail', // 为了方便在开发者进行调试
  mixins: [badgeMixins],
  data () {
    return {
      test: '123',
      goodsDetail: null
    }
  },
  // computed: {
  //   ...mapGetters('cart', ['getTotalCount'])
  // },
  created () {
    this.getGoodsDetailData()
  },
  methods: {
    async getGoodsDetailData () {
      const res = await getGoodsDetail(this.$route.query.proid)

      this.goodsDetail = res.data
    },
    onClickLeft () {
      this.$router.back()
    },
    ...mapMutations('cart', ['addToCart']),
    add () {
      const goods = {
        proid: this.goodsDetail.proid,
        proname: this.goodsDetail.proname,
        img: this.goodsDetail.img1,
        price: this.goodsDetail.originprice,
        number: 1, // 默认数量
        state: true // 默认选中
      }

      this.addToCart(goods)
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  padding: 10px;
  .price {
    font-size: 20px;
    color: red;
    font-weight: bold;
  }
}
</style>
